<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-else用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<!--
下面总结一下，vue中的key的作用，在vue中我们可能在两种情况下使用key，第一种情况下就是在v-if中,第二种情况下就是在v-for中使用key。下面我们来看一下key在其中起到的作用。
二、在v-if中使用key
首先我们先看在vue中出现的一种情况，我们在vue中如果使用v-if进行切换时，此时Vue为了更加高效的渲染，此时会进行前后比较，如果切换前后都存在的元素，则直接复用。如果我们在模板中切换前后都存在input框，此时我们在input框中写入一些数据，并且进行页面切换，则原有的数据就会保存。
此时我们就可以使用key，给每一个input框，添加一个唯一的标识key，来表示元素的唯一性。
三、在v-for中使用key
对于用v-for渲染的列表数据来说，数据量可能一般很庞大，而且我们经常还要对这个数据进行一些增删改操作。那么整个列表都要重新进行渲染一遍，那样就会很费事。而key的出现就尽可能的回避这个问题，提高效率。v-for默认使用就地复用的策略，列表数据修改的时候，他会根据key值去判断某一个值是否修改，如果修改则重新渲染该项，否则复用之前的元素。在v-for中我们的key一般为id，也就是唯一的值，但是一般不要使用index作为key。
v-show   通过css样式中的dispaly：none；控制元素显示、隐藏  v-if看不到
-->
<body>
  <div id="app">

      <!--if else  用法 -->
       <span v-if="flag">hello world</span>
       <span v-else>你好 世界</span>
        <br/>
      <!--v-if  v-else-if v-else用法 -->
      <span v-if="gender==0">男</span>
      <span v-else-if="gender==1">女</span>
      <span v-else>未知</span>

      <!--template标签在页面不会显示 可以作为块来进行使用-->
      <template v-if="isShow">
          <p>hello vue</p>
          <div>hello javaboy!</div>
          <span>www.javaboy.org</span>
      </template>
       <hr>
      <span v-show="isShow">isShow</span>
      <span v-if="isShow">isShow</span>
  </div>

<script>
    var app =new Vue({
      el:"#app",
        data:{
            flag: true,
            gender:0,
            isShow:true,
        }
    });

</script>
</body>
</html>